<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>
<script>
import appService from '@/common/service/app'
export default {
  name: 'App',
  data: () => {
    return {
      isRouterAlive: true
    }
  },
  computed: {
    currentTheme() {
      return this.$store.getters.currentTheme
    },
    currentLanguage() {
      return this.$store.getters.currentLanguage
    }
  },
  watch: {
    // 监听语种发生变化后，进行语种切换，reload方法通过隐藏和展示整个页面，从而触发页面刷新
    currentLanguage(newVal, oldVal) {
      this.reload();
      this.$log.info('页面语种切换成功，切换前的语种：', newVal, '；切换后的语种：', oldVal);
    }
  },
  created() {
    appService.initTheme();
    appService.initLanguage();
    this.reload();
  },
  mounted() {
    // 监听页面全屏事件，当页面的全屏状态发生变化时，设置全局全屏状态
    // 该监听可监听用户点击按钮改变全屏状态和通过ESC按钮退出全屏
    this.$utils.listenFullScreen('add', () => {
      this.$store.commit('fullScreen', this.$utils.isFullScreen());
    });
  },
  methods: {
    /**
     * [reload 页面重新加载的方法，将整个页面先销毁，再重新展示，触发所有页面及组件的初始化方法]
     * @return {[Null]} [无]
     */
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>
<style>
#app {
  overflow: auto;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>